<template>
  <el-collapse v-model="activeKeys" class="lfb-node-container">
    <el-collapse-item
      v-for="(group, index) in groups"
      :key="index.toString()"
      :title="group.label"
      :name="index.toString()"
    >
      <Node
        v-for="node in group.children"
        :key="node.type"
        :data="node"
        @mousedown="handleMousedown"
        @mouseup="handleMouseup($event)"
        @click="handleNodeClick"
      />
      <Node
        v-if="group.children.length && group.children.length % 3 === 2"
        class="plain"
        :data="fixNode"
      />
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Node from './Node.vue'
import { ElCollapse, ElCollapseItem } from 'element-plus'

const emits = defineEmits(['mousedown', 'mouseup', 'click'])

const props = withDefaults(
  defineProps<{
    groups: any[]
  }>(),
  {
    groups: () => []
  }
)

const activeKeys = ref<string[]>(props.groups.map((g, index) => index.toString()))
const fixNode = ref<Record<string, any>>({
  type: '',
  data: {
    label: ''
  }
})

const handleMousedown = (e: MouseEvent) => {
  emits('mousedown', e)
}
const handleMouseup = (e: MouseEvent) => {
  emits('mouseup', e)
}
const handleNodeClick = (e: MouseEvent) => {
  emits('click', e)
}
</script>

<style lang="scss">
.lfb-node-container {
  border: none !important;
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border: none;
  }
  .el-collapse-item__content {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
